<template>
  <div class="result">
    <el-tabs v-model="type" @tab-change="getSearchResult">
      <el-tab-pane label="单曲" :name="1">
        <div class="songs" v-if="tableData">
           <el-table :data="tableData" @row-click="handlePlay">
            <el-table-column width="50">
              <template #default="scope">
                <span>{{ scope.$index }}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :formatter="column.formatter" :width="column.width"></el-table-column>
          </el-table>
        </div>
        <div v-else class="style1">
          很抱歉，未能找到与<span class="c1">"{{keywords}}""</span>相关的任何单曲
        </div>
      </el-tab-pane>
      <el-tab-pane label="歌手" :name="100">
        <div class="style1 c1">页面暂未开发</div>
      </el-tab-pane>
      <el-tab-pane label="专辑" :name="10">
        <div class="style1 c1">页面暂未开发</div>
      </el-tab-pane>
      <el-tab-pane label="歌单" :name="1000">
        <div class="style1 c1">页面暂未开发</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {ref,watch,computed,getCurrentInstance,onMounted} from 'vue'
import { useUserStore } from '@/store/userInfo'
import { useMusicStore } from '@/store/music'
import utils from '@/utils/utils.js'
const  {proxy}=getCurrentInstance()
const userStore=useUserStore()
const musicStore=useMusicStore()
let keywords=computed(()=>{
  return userStore.keywords
})
let type=ref(1)
// 获取搜索结果
let tableData=computed(()=>{
  if(userStore.result.songCount==0){
    return false
  }
  return userStore.result.songs
})
let columns = ref([
  {
    label: '音乐标题',
    prop: 'name',
    width:'350px'
  },
  {
    label: '歌手',
    prop: 'ar',
    formatter(row) {
      return row.ar.map((item) => item.name).join(' / ')
    },
  },
  {
    label: '专辑',
    prop: 'al',
    formatter(row) {
      return row.al.name
    },
  },
  {
    label: '时长',
    prop: 'dt',
    width: '100',
    formatter(row) {
      return utils.formateDate(new Date(row.dt), 'mm:ss')
    },
  },
])
let handlePlay=async(val)=>{
  let {data}=await proxy.$api.getMusicUrl({id:val.id})
  musicStore.saveCurPlayMusicUrl(data[0].url)
  musicStore.saveCurMusicInfo(val)
  musicStore.setIsPlay(true)
}
</script>

<style lang="scss">
.style1{
  margin-top: 40px;
  text-align: center;
  font-size: 12px;
}
.c1{
  color: rgb(53, 148, 129);
}
.dark .c1{
  color: aquamarine;
}
</style>